import React from 'react';
import ReactDOM from 'react-dom/client';
// import App from "./App";

// const ReactDOM = {
//     createRoot: (container) => {
//         const render = ({type,props},parent) => {
//                 const ele = document.createElement(type);
//                 Object.keys(props).forEach(key=>{
//                     if(key === "children") {
//                         if(typeof props.children == "string") {
//                             const txt = document.createTextNode(props.children);
//                             ele.appendChild(txt);
//                         }else{
//                             props.children.forEach(child=>{
//                                 if(typeof child === "string") {
//                                     const txt = document.createTextNode(child);
//                                     ele.appendChild(txt);
//                                 }else{
//                                     render(child,ele);
//                                 }
//                             })
//                         }
//                     }else{
//                         ele[key] = props[key]; 
//                     }
//                 })
//                 if(parent) {
//                     parent.appendChild(ele);
//                 }
//                 else{
//                     container.appendChild(ele);
//                 }
//             }
//         return {
//             render
//         }
//     }
// }

const App = (props) => {
    console.log(props);
    return <h1>title:{props.title} id:{props.id}</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'));

// root.render(<App title="react" id="100"/>)

// const ele = <span>hello<b>react</b><b>new Date().toLocaleTimeString()}</b></span>;

//条件渲染
const flag = true;
const ele1 = flag?<div>react</div>:<h1>react</h1>;//控制两个元素切换=>使用三目运算符
const ele2 = flag&&<div>react</div>;//决定元素是否显示=>使用短路

//循环渲染
const data = [111,222,333,444,555,666];
const List = ()=>{
    return <ul>
        {
            data.map(item=><li key={item}>{item}</li>)
        }
    </ul>
};

root.render(<List data={data}/>);
